<?php
defined('IN_XLP') or die('Access Denied');
$Document = array(
    'pageid'   => 'index-add', //页面标示
    'pagename' => '添加app首页内容', //当前页面名称
    'mycss'    => array('../jquery-ui/css/smoothness/jquery-ui-1.10.0.custom.min'), //加载的css样式表
    'myjs'     => array(), //加载的js脚本
    'footerjs' => array(
        '../jquery-ui/js/jquery-ui-1.10.0.custom.min',
        '../jquery-ui/js/jquery-ui-timepicker-addon',
        'content/fuelux/fuelux',
    ),
    'head'     => true, //加载头部文件
);
include getTpl('header', 'public');
?>
<style>
label{cursor:pointer;}
.pt7{padding-top:7px;}
#pic_preview{position:relative;left:0px;top:35px;}
#pic_choose{position:absolute;left:15px;top:0;}
#pic{position:absolute;left:15px;top:0;width:89px;height:30px;z-index:10;opacity:0;}
#pic_rate_tip{display:none;color:red;}
</style>
<!--顶部导航 开始-->
<?php include getTpl('top', 'public');?>
<!--顶部导航 结束-->
<!--左侧菜单 开始-->
<?php include getTpl('nav', 'public');?>
<!--左侧菜单 结束-->
<!--主体 开始-->
<!-- content -->
<section id="content">
    <section class="main padder">
        <div class="clearfix">
            <h4><i class="fa fa-edit"></i>新增内容 （<?php echo $topic ?>） </h4>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <section class="panel">
                    <div class="panel-body">
                        <form class="form-horizontal" id="appIndexAddForm" method="post" autocomplete="off" enctype="multipart/form-data" action="<?php echo U('app/index')."#$id" ?>">
                            
                            <div class="form-group">
                                <label class="col-sm-1 control-label">服务中心</label>
                                <div class="col-sm-1">
                                    <?php foreach ($service as $v): ?>
                                    <div class="checkbox"> 
                                        <label class="checkbox-custom">
                                            <input type="checkbox" name="service[<?php echo $v['sid'] ?>]" checked="checked" value="<?php echo $v['sid'] ?>">
                                            <i class="fa fa-check-square-o"></i><?php echo $v['stitle'] ?>
                                        </label> 
                                    </div>
                                    <?php endforeach ?>
                                </div>
                            </div>
                            
                            <div class="form-group">
                                <label class="col-sm-1 control-label">栏&emsp;&emsp;目</label>
                                <div class="col-sm-1 pt7">
                                    <b><?php echo $topic ?></b>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-1 control-label">内容位置</label>
                                <div class="col-sm-1">
                                    <select id="position" name="position" class="form-control">
                                        <option value="-1">选择位置</option>
                                        <?php foreach ($position as $k => $v): ?>
                                        <option value="<?php echo $k ?>"><?php echo $v ?></option>
                                        <?php endforeach ?>
                                    </select>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-1 control-label">调用模块</label>
                                <div class="col-sm-1">
                                    <select id="module" name="module" class="form-control">
                                        <option value="0">选择模块</option>
                                        <?php foreach ($module as $k => $v): ?>
                                        <option value="<?php echo $k ?>"><?php echo $v ?></option>
                                        <?php endforeach ?>
                                    </select>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-1 control-label">相关参数</label>
                                <div class="col-sm-3">
                                    <input type="text" name="para" id="para" placeholder="根据不同模块填写所需参数，网页版填写链接地址" class="form-control" />
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-1 control-label">标&emsp;&emsp;题</label>
                                <div class="col-sm-2">
                                    <input type="text" name="title" id="title" placeholder="内容标题" class="form-control" />
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-1 control-label">颜&emsp;&emsp;色</label>
                                <div class="col-sm-2">
                                    <input type="text" name="color" id="color" placeholder="十六进制值的色值，如#FC5755" class="form-control" />
                                    <div class="help-block">内容位置为标题时必填，否则不填</div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-1 control-label">图片预览</label>
                                <div class="col-sm-2" style="position:relative;">
                                    <img id="pic_preview" src="" alt="" onload="pic_rate(this.width,this.height);">
                                    <a id="pic_choose" class="btn btn-sm btn-info" data-toggle="modal" href="#modal"><i class="fa fa-fw fa-plus"></i>选择图片</a>
                                    <div style="width:500px;position:absolute;left:120px;top:0px;"><span id="pic_rate_tip">目前图片比例为<b id="pic_rate"></b></span>（<b>注意：</b>横幅图片比例为2.6比1，商品大图比例2比1，其它图片均为1比1。）</div>
                                    <input id="pic" type="file" name="pic" value="upload">
                                </div>
                            </div>
                            
                            <div class="form-group" style="margin-top:45px;">
                                <label class="col-sm-1 control-label">起始时间</label>
                                <div class="col-sm-3">
                                    <input class="input-sm required" style="display:inline" name="starttime" id="starttime" size="18" type="text" >
                                    <span>&emsp;&#8764&emsp;</span>
                                    <input class="input-sm" style="display:inline" name="endtime" id="endtime" size="18" type="text" >
                                </div>
                            </div>

                            <div class="form-group pt7">
                                <div class="col-sm-9 col-lg-offset-1">
                                    <input id="layout" type="hidden" name="layout" value="<?php echo $id ?>">
                                    <input id="has_pic" type="hidden" name="has_pic" value="0">
                                    <div class="col-sm-1">
                                        <button type="submit" id="sub-ok" data-loading-text="正在提交..." class="btn btn-primary">保存</button>
                                    </div>
                                    <button type="button" class="btn btn-white">取消</button>
                                </div>
                            </div>

                        </form>
                    </div>
                </section>
            </div>
        </div>
    </section>
</section>
<!--/ content --> 
<!--主体 结束-->
<script>
if(window.FileReader==undefined) {
    alert('对不起，您的浏览器不支持图片预览，建议使用Chrome或者Firefox');
}
//允许的图片格式
var allow_file_type='<?php echo $img_type ?>';
//图片input
var field = null;

function getFileExtension(filePath) { //v1.0
    fileName = ((filePath.indexOf('/') > -1) ? filePath.substring(filePath.lastIndexOf('/')+1,filePath.length) : filePath.substring(filePath.lastIndexOf('\\')+1,filePath.length));
    return fileName.substring(fileName.lastIndexOf('.')+1,fileName.length);
}
function checkFileUpload(extensions) { //v1.0
    if (extensions.toLowerCase().indexOf(getFileExtension(field.value).toLowerCase()) == -1) {
        Msg.error('这种文件类型不允许上传');
        return false;
    }
    return true;
}
function checkform(){
    if (field.value == '') {
        Msg.error('请选择需要上传的图片');
        resetSubmit("#sub-ok",'保存');
        return false;
    }
    if (allow_file_type){
        return checkFileUpload(allow_file_type);
    }
}

function pic_preview(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            //图片预览
            $('#pic_preview').attr('src', e.target.result);
        }
        reader.readAsDataURL(input.files[0]);
        $('#has_pic').val(1);
    }
}

function pic_rate(w, h) {
    $('#pic_rate_tip').show();
    var rate = (w/h).toFixed(2);
    $('#pic_rate').text(rate+' 比 1');
}

$(function(){
    //时间插件
    $('#starttime').datetimepicker();
    $('#endtime').datetimepicker();

    field = document.getElementById('pic');
    //图片预览
    $('#pic').change(function(){
        resetSubmit("#sub-ok",'保存');
        checkform();    //检查文件类型
        pic_preview(this);  //预览
    });

    $('#appIndexAddForm').submit(function(){
        //检查服务中心
        var checkone = false;
        var service = $('input[name^=service]');
        var s_len = service.length;
        for(var i=0; i<s_len; i++) {
            if($(service[i]).prop('checked')) {
                checkone = true;
                break;
            }
        }
        if(!checkone) {
            Msg.error('请至少选择一个服务中心');
            resetSubmit("#sub-ok",'提交');
            return false;
        }


        if( $('#position').val() == -1 ) {
            Msg.error('请选择内容位置');
            resetSubmit("#sub-ok",'提交');
            return false;
        }
        
        if( $('#module').val() == 0 ) {
            Msg.error('请选择调用模块');
            resetSubmit("#sub-ok",'提交');
            return false;
        }

        if( $.trim($('#title').val()) == '' ) {
            Msg.error('请输入内容标题');
            resetSubmit("#sub-ok",'提交');
            return false;
        }

        if( $.trim($('#starttime').val()) == '' ) {
            Msg.error('请输入起始时间');
            resetSubmit("#sub-ok",'提交');
            return false;
        }

        Msg.loading();

        return true;
    });
});
</script>
<?php include getTpl('footer', 'public'); ?>